import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import Sidebar from '../components/Sidebar';
import Header from '../components/Header';
import './AdminLayout.css';

const AdminLayout: React.FC = () => {
    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

    const toggleSidebar = () => {
        setSidebarCollapsed(!sidebarCollapsed);
    };

    console.log('AdminLayout is rendering');

    return (
        <div className="admin-layout">
            <Sidebar collapsed={sidebarCollapsed} />
            <div className={`admin-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
                <Header onToggleSidebar={toggleSidebar} />
                <main className="admin-main">
                    <Outlet />
                </main>
            </div>
        </div>
    );
};

export default AdminLayout;

